import Tabs, { TabsProps } from '@/components/Tabs';
import React, { useState } from 'react';
import { useIntl } from 'umi';
import Style from '../../components/batteryIndex.less';
import { BarChart } from './moduleChart';

interface Ipros {
  maxData: API.DeviceRealTimeDTO;
}

export const ModuleOverview: React.FC<Ipros> = ({ maxData }) => {
  const { tempList = [], voltageList = [] } = maxData;
  const [selectedTab, setSelectedTab] = useState('tempt'); // State to track the selected tab
  const intl = useIntl();
  const handleTabChange = (key: string) => {
    setSelectedTab(key);
  };

  const items: TabsProps['items'] = [
    {
      key: 'tempt',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.CellTemperature' }),
      children:
        selectedTab === 'tempt' ? <BarChart chartData={tempList} moduleType="tempt" /> : null,
    },
    {
      key: 'vol',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.CellVoltage' }),
      children:
        selectedTab === 'vol' ? <BarChart chartData={voltageList} moduleType="vol" /> : null,
    },
  ];

  return (
    <div>
      <Tabs items={items} onChange={handleTabChange} className={Style.secondTabs} />
    </div>
  );
};
